<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>左右分栏布局示例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body, html {
            height: 100%;
            overflow: hidden;
        }
        .container {
            display: flex;
            height: 100vh;
        }
        .sidebar {
            width: 200px;
            background-color: #f0f0f0;
            padding: 20px;
            overflow-y: auto;
        }
        .sidebar ul {
            list-style-type: none;
        }
        .sidebar li {
            margin-bottom: 10px;
        }
        .sidebar a {
            display: block;
            padding: 8px 12px;
            background-color: #e0e0e0;
            text-decoration: none;
            color: #333;
            border-radius: 4px;
        }
        .sidebar a:hover {
            background-color: #d0d0d0;
        }
        .main-content {
            flex: 1;
            border: none;
        }
    </style>
</head>
<body>

 <!--  主界面  -->
    <div id="mainContainer" class="container">
        <div class="sidebar">
            <h3>LCC样例</h3>
            <ul id="item-list">
                <!--            <li><a href="#" data-url="https://www.baidu.com" data-param="from=sidebar&source=baidu">百度</a></li>-->
            </ul>
        </div>

        <iframe id="contentIFrame"
                class="main-content"
                name="contentFrame"
                src="right-2-1-init.html"
                sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
    </div>


<script src="DGSLCCConfigParser.js">
</script>

<script>
    class Finder{
        constructor() {
            // 可选：初始化时检查 DOM 是否可用
            if (typeof document === 'undefined') {
                throw new Error('DOM环境不可用');
            }
        }

        $(id) {
            return document.getElementById(id);
        }

        findItemList(){
            return this.$('item-list');
        }

        findContentIFrame(){
            return this.$('contentIFrame');
        }
    }

    class UIController{
        createItem(menuItem,basePath,dataUrl){
            // 创建 li 元素
            const liElement = document.createElement('li');

            // 创建 a 元素
            const aElement = document.createElement('a');

            // 设置 a 元素的属性
            aElement.href = '#';
            // 这边是固定的地址
            // aElement.dataset.url = 'https://www.baidu.com';
            // aElement.dataset.param = 'requestUrl=' + basePath + menuItem.url;
            aElement.setAttribute("data-url",dataUrl);
            const requestParams = encodeURIComponent(basePath + menuItem.path);
            aElement.setAttribute("data-param","requestUrl=" + requestParams);

            aElement.innerHTML = menuItem.label;
            // 将 a 元素添加到 li 元素中
            liElement.appendChild(aElement);

            liElement.addEventListener('click', (e)=> {
                e.preventDefault();
                // 获取自定义数据属性
                const targetUrl = aElement.getAttribute('data-url');
                let params = aElement.getAttribute('data-param');
                // console.log("before:" + params);
                params = decodeURIComponent(params);
                // console.log("after:" + params);
                // 构建带参数的完整URL
                const fullUrl = targetUrl + (targetUrl.includes('?') ? '&' : '?') + params;
                console.log(fullUrl);
                // this.$('contentIFrame').setAttribute("src", fullUrl);

                // 统一这个类进行ID界面资源查找
                new Finder().findContentIFrame().setAttribute("src", fullUrl);
            })

            return liElement;
        }


        // 初始化的时候用到
        bindToPage(menuItem,basePath,dataUrl){
            const requestParams = basePath + menuItem.path;
            const dataParams = "requestUrl=" + requestParams;
            // console.log("after:" + params);
            // 构建带参数的完整URL
            const fullUrl = dataUrl + (dataUrl.includes('?') ? '&' : '?') + dataParams;
            console.log("bindToPage() fullUrl:" + fullUrl);

            // this.$('contentIFrame').setAttribute("src", fullUrl);
            // 统一这个类进行ID界面资源查找
            new Finder().findContentIFrame().setAttribute("src", fullUrl);
        }
    }

    /**
     * 相关文件加载的对象
     * @param jsonUrl
     * @returns {Promise<{}|any>}
     */
    async function fetch3DGSLCC(jsonUrl) {
        try {
            const response = await fetch(jsonUrl);
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }

            const responseData = await response.json();
            console.log("获取URL数据:", responseData);
            return responseData;
        } catch (error) {
            // 下面这段代码查看日志去看
            console.error("获取URL数据时出错:", error);
            return {};
        }
    }

    function printItem(item){
        for (const key in item) {
            console.log(key, item[key]); // 输出: name Alice, age 30, gender female
        }
    }

    function loadPage(listener){
        listener.preload();
        const finder = new Finder();

        const itemList = finder.findItemList();
        const uiController = new UIController();

        fetch3DGSLCC("3DGSLCCConfig.json").then((configData) => {
            const dgsLCCConfigParser = new DGSLCCConfigParser(configData);

            const baseUrl = dgsLCCConfigParser.baseUrl;

            const menuItems = dgsLCCConfigParser.getLoadedMenuItems();
            // 这边加载右边界面相关
            const defaultPage = "right-2-1.html";
            menuItems.forEach(menuItem => {
                // printItem(menuItem);
                const item = uiController.createItem(menuItem,baseUrl,defaultPage);
                itemList.appendChild(item);
            });

            // 加载第一个菜单元素中到默认界面
            // uiController.bindToPage(menuItems[0],baseUrl,defaultPage);
            listener.loaded();
        }).catch(error=>{}).finally(()=>{});
    }

    function createListener(){
        return {
            preload: function () {
                // document.getElementById('loadingContainer').style.display = 'block';
                // document.getElementById('mainContainer').style.display = 'none';
            },
            loaded: function () {
                // document.getElementById('loadingContainer').style.display = 'none';
                // document.getElementById('mainContainer').style.display = 'block';
            }
        }
    }

    function executeLoadPage(){
        loadPage(createListener());
    }

    executeLoadPage();

</script>
</body>
</html>